<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      class="form-search"
    >
      <el-form-item label="任务模板名称" prop="templateName">
        <el-input
          v-model="queryParams.templateName"
          placeholder="请输入任务模板名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表单名称" prop="reportName">
        <el-input
          v-model="queryParams.reportName"
          placeholder="请输入表单名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="templateType">
        <el-select v-model="queryParams.templateType" placeholder="请选择类型" clearable>
          <el-option
            v-for="dict in task_template_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in task_template_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
        <el-button icon="refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleAdd" v-hasPermi="['technology:processManage:add']">
          关联任务模板
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="processManageList" border show-overflow-tooltip>
      <!-- <el-table-column label="任务模板编号" prop="templateCode">
        <template #default="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">
            {{ scope.row.templateCode }}
          </el-link>
        </template>
      </el-table-column> -->
      <el-table-column label="任务模板编号" align="center" prop="templateCode" />
      <el-table-column label="任务模板名称" align="center" prop="templateName" />
      <el-table-column label="模板类型" align="center" prop="templateType">
        <template #default="scope">
          <dict-tag :options="task_template_type" :value="scope.row.templateType" />
        </template>
      </el-table-column>
      <el-table-column label="版本号" align="center" prop="version" />
      <el-table-column label="表单名称" align="center" prop="reportName" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="task_template_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button link type="primary" icon="delete" @click="handleDelete(scope.row)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <taskTemplateDialog
      @changeTemplateDialogList="getTaskTemplateList"
      :title="'选择生产订单'"
      :openTaskTemplate="open"
      :processId="processId"
      :processManageId="processManageId"
    ></taskTemplateDialog>
  </div>
</template>

<script setup name="taskTemplate">
import {
  listProcessTaskTemplateList,
  delTechProcessTaskTemplate,
} from "@/api/technology/processManage";
import taskTemplateDialog from "./taskTemplateDialog";
import { ref, reactive, toRefs, getCurrentInstance, watch } from "vue";
const props = defineProps(["processId", "processManageId"]);
const { processId, processManageId } = toRefs(props);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const total = ref(0);
const title = ref("");
// 工艺管理表格数据
const processManageList = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    workProcedureId: processId,
    processManageId,
  },
});
// const selectable = (row) => row.status == "0";
const { queryParams } = toRefs(data);
const { proxy } = getCurrentInstance();
const { task_template_status } = proxy.useDict("task_template_status");
const { task_template_type } = proxy.useDict("task_template_type");
watch(
  () => processId.value,
  (newValue) => {
    if (newValue) {
      getList();
    }
  },
  {
    immediate: true,
  }
);
/** 查询工艺管理列表 */
function getList() {
  loading.value = true;
  listProcessTaskTemplateList(queryParams.value).then((response) => {
    processManageList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function getTaskTemplateList(val) {
  if (val == "update") {
    getList();
  }
  open.value = false;
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
  title.value = "选择任务模板";
  open.value = true;
}

/** 删除按钮操作 */
function handleDelete(row) {
  const id = row.id || ids.value;
  let msg = "";
  if (row.templateCode) {
    msg = `是否确认删除任务模板编号为"${row.templateCode}"数据项？`;
  } else {
    msg = `是否确认删除所选数据项？`;
  }
  proxy.$modal
    .confirm(msg)
    .then(function () {
      return delTechProcessTaskTemplate(id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
</script>
